<template>
  <div>
    <!--  -->
    <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否启用" :label-width="formLabelWidth">
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!--  -->

    <div class="top">
      <h3>商品分类</h3>
      <el-button
        type="primary"
        class="addClass"
        @click="dialogFormVisible = true"
        >添加分类</el-button
      >
    </div>
    <!--  -->
    <el-table
      ref="singleTable"
      :data="tableData"
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 100%"
      row-key="id"
    >
      <el-table-column type="index" label="序号"> </el-table-column>

      <el-table-column prop="address" label="分类名称"> </el-table-column>

      <el-table-column label="是否启用">
        <template slot-scope="scope">
          <el-switch
            v-model="value[scope.$index]"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>

        <el-table-column prop="address" label="操作">
      <template slot-scope="scope">
          <el-button type="primary" size="mini" plain @click="remList(scope.$index,scope.row)"
            >编辑</el-button
          >
          <el-button type="danger" size="mini" plain>删除</el-button>
      </template>
        </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next, jumper"
        :total="50"
      >
      </el-pagination>
    </div>
    <!--  -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      currentRow: null,
      value: [true, true, true, true],
      //弹出框
      dialogTableVisible: false,
      dialogFormVisible: false,
      //   弹出框数据
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "80px",
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.currentRow = val;
      console.log(`当前页: ${val}`);
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },

    remList(i,item){
        console.log(i,item)
    }
  },
};
</script>

<style lang="less" scoped>
#addCla {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background-color: rgba(0, 0, 0, 0.356);
  z-index: 100;
}

.top {
  position: relative;
  border-bottom: 3px solid #ebeef5;
  h3 {
    height: 50px;
    display: flex;
    align-items: center;
  }
  .addClass {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
.block {
  margin-top: 20px;
}
</style>